<template>
  <div class="m-loading" v-show="isLoading">
    <div class="container">
      <div class="waving">
        <span>l</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span>
      </div>
      <div class="waving">
        <span>系</span>
        <span>统</span>
        <span>数</span>
        <span>据</span>
        <span>载</span>
        <span>入</span>
        <span>中</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['isLoading', 'timeLoad', 'textLoad'])
</script>

<style lang="scss" scoped>
.m-loading {
  animation: xiaoshi 15s infinite ease-in-out;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;

  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  user-select: none;

  @keyframes xiaoshi {
    0% {
      opacity: 0.9;
    }

    10% {
      opacity: 0.9;
    }

    20% {
      opacity: 0.9;
    }

    30% {
      opacity: 0.8;
    }

    40% {
      opacity: 0.7;
    }

    50% {
      opacity: 0.5;
    }

    60% {
      opacity: 0.4;
    }

    70% {
      opacity: 0.3;
    }

    80% {
      opacity: 0.2;
    }

    90% {
      opacity: 0.1;
    }

    100% {
      opacity: 0;
    }
  }

  .container {
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: #010f15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .waving {
    perspective: 1000px;
    -moz-perspective: 1000px
  }

  .waving>* {
    display: inline-block;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transform-origin: top;
    animation: waving 1s infinite ease-in-out;
    animation-fill-mode: backwards
  }

  .waving>*:nth-child(1) {
    animation-delay: .12s
  }

  .waving>*:nth-child(2) {
    animation-delay: .24s
  }

  .waving>*:nth-child(3) {
    animation-delay: .36s
  }

  .waving>*:nth-child(4) {
    animation-delay: .48s
  }

  .waving>*:nth-child(5) {
    animation-delay: .6s
  }

  .waving>*:nth-child(6) {
    animation-delay: .72s
  }

  .waving>*:nth-child(7) {
    animation-delay: .84s
  }

  .waving>*:nth-child(8) {
    animation-delay: .96s
  }

  .waving>*:nth-child(9) {
    animation-delay: 1.08s
  }

  .waving>*:nth-child(10) {
    animation-delay: 1.2s
  }

  .waving>*:nth-child(11) {
    animation-delay: 1.32s
  }

  .waving>*:nth-child(12) {
    animation-delay: 1.44s
  }

  .waving>*:nth-child(13) {
    animation-delay: 1.56s
  }

  .waving>*:nth-child(14) {
    animation-delay: 1.68s
  }

  .waving>*:nth-child(15) {
    animation-delay: 1.8s
  }

  .waving>*:nth-child(16) {
    animation-delay: 1.92s
  }

  .waving>*:nth-child(17) {
    animation-delay: 2.04s
  }

  .waving>*:nth-child(18) {
    animation-delay: 2.16s
  }

  .waving>*:nth-child(19) {
    animation-delay: 2.28s
  }

  .waving>*:nth-child(20) {
    animation-delay: 2.4s
  }

  @keyframes waving {
    0% {
      transform: rotateX(30deg) translateY(0);
      text-shadow: 0 3px 0 #ccc, 0px 10px 10px rgba(0, 0, 0, 0.5)
    }

    50% {
      transform: rotateX(45deg) translateY(-20px);
      text-shadow: 0 3px 0 #ccc, 0px 55px 20px rgba(0, 0, 0, 0.4)
    }

    100% {
      transform: rotateX(30deg) translateY(0);
      text-shadow: 0 3px 0 #ccc, 0px 10px 10px rgba(0, 0, 0, 0.5)
    }
  }
}
</style>
